<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="-">
                <el-breadcrumb-item replace>客服管理</el-breadcrumb-item>
                <el-breadcrumb-item replace>工单详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-form ref="form" :inline="true" :model="form">
                    <p class="title">用户退款</p>
                    <div class="userid">
                        用户ID: 356677 申请会员退款
                    </div>
                    <div class="enclosure">
                        <div class="item">
                            <div class="left">
                                <img src="@/assets/img/附件.png" alt="" />
                            </div>
                            <div class="right">
                                <p>附件1名称.jpg</p>
                                <p>10K</p>
                            </div>
                        </div>

                        <div class="item">
                            <div class="left">
                                <img src="@/assets/img/附件.png" alt="" />
                            </div>
                            <div class="right">
                                <p>附件1名称.jpg</p>
                                <p>10K</p>
                            </div>
                        </div>
                    </div>
                    <div class="work-order-num">
                        <span>工单号: 34546577</span>
                        <span>工单类型: 用户退款</span>
                    </div>

                    <el-form-item label="优先级">
                        <el-radio v-model="form.radio" label="1">紧急</el-radio>
                        <el-radio v-model="form.radio" label="2">一般</el-radio>
                        <el-radio v-model="form.radio" label="3">低</el-radio>
                    </el-form-item>
                    <br />
                    <el-form-item label="用户ID">
                        <el-input
                            placeholder="请输入账户名"
                            style="color: blue;"
                            clearable
                            v-model="form.name"
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item>
                    <a
                        href="/#/user/detail"
                        style="color: rgba(27, 143, 230, 1); vertical-align: middle; display: inline-block; margin-right:20px;"
                        >查看用户详情</a
                    >
                    <el-form-item label="手机号">
                        <el-input
                            placeholder="请输入手机号"
                            style="color: blue;"
                            clearable
                            v-model="form.name"
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="备注">
                        <el-input type="textarea" placeholder="请输入备注信息" v-model="form.name" maxlength="500" show-word-limit rows="5">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="" style="vertical-align: bottom;">
                        <img src="@/assets/img/加号.png" style="width:20px; height: 20px; vertical-align: middle;" alt="" />
                        <label class="file-upload">
                            <input type="file" name="file" />
                            <span>上传附件</span>
                        </label>
                        <span>(单个附件不超过6M)</span>
                    </el-form-item>
                    <br />
                    <el-form-item label="处理状态">
                        <el-select v-model="form.name" placeholder="地址" class="handle-select mr10">
                            <el-option key="1" label="处理中" value="处理中"></el-option>
                            <el-option key="2" label="待处理" value="待处理"></el-option>
                            <el-option key="3" label="已完结" value="已完结"></el-option>
                        </el-select>
                    </el-form-item>
                    <br />
                    <el-form-item label="">
                        <el-button type="primary" @click="handleSearch">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'WorkOrderDetail',
    data() {
        return {
            form: {
                radio: ''
            }
        };
    },
    activated() {},
    methods: {}
};
</script>

<style scoped lang="scss">
.handle-box {
    margin-bottom: 20px;
    .title {
        height: 40px;
        line-height: 40px;
        color: rgb(40, 70, 89);
        font-size: 18px;
        font-weight: 400;
    }
    .userid {
        width: 570px;
        height: 120px;
        line-height: 120px;
        padding-left: 10px;
        box-sizing: border-box;
        background-color: rgba(236, 231, 231, 0.54);
        color: rgb(40, 70, 89);
        margin-bottom: 20px;
    }
    .enclosure {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        margin-bottom: 20px;
        .item {
            width: 220px;
            height: 67px;
            display: flex;
            justify-content: space-between;
            padding: 0 15px 0;
            box-sizing: border-box;
            align-items: center;
            border: 1px solid #ccc;
            margin-right: 20px;
            .left {
                width: 33px;
                height: 33px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .right {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 100%;
                padding: 10px 0 10px;
                box-sizing: border-box;
                width: 100px;
            }
        }
    }

    .work-order-num {
        width: 570px;
        height: 120px;
        line-height: 120px;
        padding-left: 10px;
        box-sizing: border-box;
        background-color: rgba(236, 231, 231, 0.54);
        color: rgb(40, 70, 89);
        margin-bottom: 20px;
        span {
            margin-right: 40px;
        }
    }
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

.file-upload {
    display: inline-block;
    width: 72px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    background: #fff;
    vertical-align: bottom;
    margin-right: 10px;
    // margin-left: 10px;
    input {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        opacity: 0;
        filter: Alpha(opacity=0);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
        color: transparent;
        width: 100%;
        height: 100%;
        cursor: pointer;
        font-size: 100px;
        background: transparent;
    }
    span {
        font-size: 12px;
        font-weight: bold;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        color: #3aa1f5;
    }
}
</style>
